
<!doctype html>
<!-- The DOCTYPE declaration above will set the     -->
<!-- browser's rendering engine into                -->
<!-- "Standards Mode". Replacing this declaration   -->
<!-- with a "Quirks Mode" doctype is not supported. -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="WebTraerPhysics.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Web Application Starter Project</title>
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="webtraerphysics/webtraerphysics.nocache.js"></script>
	<script src="processing-1.4.1.js"></script>
	<script type="text/javascript" src="webgl-utils.js"></script>
	<script language='javascript'>
          function gwtOnLoad() {  

			try {
				loadSketchFromSources ("processing-canvas",[ "Simple_Pendulum.pde"]) ;
			
				}catch(ex)
				{
				  alert(ex);
				}
			
	  }	 	 
	  
	  var loadSketchFromSources = function(canvas, sources) {
		var code = [],
		  errors = [],
		  sourcesCount = sources.length,
		  loaded = 0;

		function ajaxAsync(url, callback) {
		  var xhr = new XMLHttpRequest;
		  xhr.onreadystatechange = function() {
			if (xhr.readyState === 4) {
			  var error;
			  if (xhr.status !== 200 && xhr.status !== 0) error = "Invalid XHR status " + xhr.status;
			  else if (xhr.responseText === "") if ("withCredentials" in new XMLHttpRequest && (new XMLHttpRequest).withCredentials === false && window.location.protocol === "file:") error = "XMLHttpRequest failure, possibly due to a same-origin policy violation. You can try loading this page in another browser, or load it from http://localhost using a local webserver. See the Processing.js README for a more detailed explanation of this problem and solutions.";
			  else error = "File is empty.";
			  callback(xhr.responseText, error)
			}
		  };
		  xhr.open("GET", url, true);
		  if (xhr.overrideMimeType) xhr.overrideMimeType("application/json");
		  xhr.setRequestHeader("If-Modified-Since", "Fri, 01 Jan 1960 00:00:00 GMT");
		  xhr.send(null)
		}
		function loadBlock(index, filename) {
		  function callback(block, error) {
			code[index] = block;
			++loaded;
			if (error) errors.push(filename + " ==> " + error);
			if (loaded === sourcesCount) if (errors.length === 0) try {
			  return new Processing(canvas, code.join("\n"))
			} catch(e) {
			  throw "Processing.js: Unable to execute pjs sketch: " + e;
			} else throw "Processing.js: Unable to load pjs sketch files: " + errors.join("\n");
		  }
		  ajaxAsync(filename, callback)
		}
		for (var i = 0; i < sourcesCount; ++i) loadBlock(i, sources[i])
	  };	  
	</script> 
	<script  type="text/javascript">
	
	
	</script>	
  </head>

  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

    <h1>Web Traer Physics</h1>
	<h2>Using Processing .PDE File</h2>
	<div style="text-align:center" >
		<canvas id="processing-canvas" ></canvas>
	</div>
<a href="http://murderandcreate.com/physics/simple_pendulum/index.html" target="_blank" >Original example and code</a></p>	
	<h3>Processing PDE File</h3>	
<p><font face="'courier new', courier, monospace"></font></p><pre><font face="'courier new', courier, monospace">
	//import traer.physics.*;

		var physics;

		var p;
		var anchor;
		var s;		

	void setup()
	{
	  size( 400, 400 );
	  smooth();
	  fill( 0 );
	  ellipseMode( CENTER );
			
	  physics = new TraerPhysics.ParticleSystem( 1, 0.05 );
			
	  p = physics.makeParticle( 1.0, width/2, height/2, 0 );
	  anchor = physics.makeParticle( 1.0, width/2, height/2, 0 );
	  anchor.makeFixed(); 
	  s = physics.makeSpring( p, anchor, 0.5, 0.1, 75 );
	}

	void mousePressed()
	{
	   p.makeFixed(); 
	   p.position().set( mouseX, mouseY, 0 );
	}

	void mouseDragged()
	{
	  p.position().set( mouseX, mouseY, 0 );
	}

	void mouseReleased()
	{
	   p.makeFree(); 
	}

	void draw()
	{
	  physics.tick();
		
	  background( 255 );
	  
	  line( p.position().x(), p.position().y(), anchor.position().x(), anchor.position().y() );
	  ellipse( anchor.position().x(), anchor.position().y(), 5, 5 );
	  ellipse( p.position().x(), p.position().y(), 20, 20 );
	}
</font></pre><p></p>

  </body>
</html>
